<template>
	<view>
		<view class="catelist">
			<scroll-view scroll-x class="scrollbox z-margin-t-32" v-if="cate.length > 1">
				<view class="tipsbox z-margin-l-32">
					<view class="z-margin-r-16" :class="two_category_id==item.id?'active':'tipsitem'" @click="choosetype(item)" v-for="(item,index) in cate">
						<image src="../../static/index/tuijian.png" v-if="item.id==''&&two_category_id!=item.id" class="tuijian z-margin-r-8" mode="" />
						<image src="../../static/index/tuijians.png" v-if="item.id==''&&two_category_id==item.id" class="tuijian z-margin-r-8" mode="" />
						{{ item.label }}
					</view>
				</view>
			</scroll-view>
			<view class="main-box">
				<scroll-view scroll-y="true" class="scroll z-padding-24" :show-scrollbar="false" enhanced="true" bindscrolltolower="more">
					<block v-for="item in list">
						<service :info="item" :type="2" @serviceTap="serviceTap"></service>
					</block>
					<!-- <van-empty description="暂无项目" v-if="finish && list.length === 0" /> -->
					<u-empty v-if="finish && list.length === 0" mode="car" icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import http from '../../utils/http';
import service from "@/component/service.vue"
export default {
	components:{
		service
	},
	data() {
		return {
			cate: [{ id: '', label: '推荐' }],
			list: [],
			finish: false,
			loading: false,
			page: 1,
			category_id: '',
			two_category_id: '',
			address: uni.getStorageSync('address'),
		};
	},
	onLoad(options) {
		console.log(options);
		(this.category_id = options.category_id || ''), (this.two_category_id = options.two_category_id || '');
		if (options.category_id) {
			this.getInfo();
		}
		uni.setNavigationBarTitle({
			title: options.name || '项目列表'
		});
		this.reload()
	},
	methods: {
		serviceTap(e){
		    this.util.skip('/service/servedetail/servedetail?id='+e.id)
		},
		choosetype(e){
		    this.two_category_id = e.id
		    this.reload()
		},
		reload(){
		    this.list = [],
		    this.page = 1,
		    this.finish = false
		    this.getList()
		},
		getList(){
		    if(this.finish){
		      return 
		    }
		    if(this.loading){
		      return 
		    }
		   this.loading = true
		    let data = {
		      page: this.page,
		      city: this.address.city
		    }
		    if(this.category_id){
		      data['category_id'] =  this.category_id
		    }
		    if(this.two_category_id){
		      data['two_category_id'] =  this.two_category_id
		    }
		    http.get('goods/getlist', data).then(res => {
		      if(res.data.length === 0){
		        this.finish = true
		      }
		      let arr = this.list.concat(res.data)
		      this.list = arr
		      
		    }).finally(res => {
		     this.loading = false
		    })
		  },
		getInfo() {
			http.get('category/getson', {
				id: this.category_id
			}).then((res) => {
				let arr = this.cate.concat(res.data);
				this.cate = arr
			});
		}
	}
};
</script>

<style lang="scss">
.catelist {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #EDF1F4;
}
.scrollbox {
	width: 100vw;
	white-space: nowrap;
	height: 70rpx;
	flex-shrink: 0;
}
.tipsbox {
	display: flex;
	align-items: center;
}
.tipsitem {
	background-color: #fff;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	font-size: 26rpx;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.active {
	display: flex;
	align-items: center;
	font-size: 26rpx;
	background-color: #fff;
	border: 1rpx solid $uni-maingreencolor;
	padding: 10rpx 20rpx;
	border-radius: 10rpx;
	color: $uni-maingreencolor;
	box-sizing: border-box;
}
.tuijian {
	width: 32rpx;
	height: 32rpx;
}

.main-box {
	flex: 1;
	overflow: hidden;
}
.scroll {
	height: 100%;
	box-sizing: border-box;
}
</style>
